<template>
  <div class="more" @click="toggle">
    <!--    <span>{{ value ? '收起' : '筛选' }}</span>-->
    <Icon
      :title="value ? '收起' : '筛选'"
      :name="value ? 'shaixuanshouqi' : 'shaixuan'"
      font-size="20"
      :color="
        value
          ? 'rgba(0, 210, 255, 1)'
          : 'rgba(167, 190, 202, 1)'
      "
    />
  </div>
</template>

<script>
import Icon from '@/components/icon'

export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Icon
  },
  methods: {
    toggle() {
      this.$emit('input', !this.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.more {
  cursor: pointer;
  display: flex;
  align-items: center;

  & > span:first-child {
    word-break: keep-all;
    margin-right: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
